<template>
  <v-treeview :items="menuItems" hoverable dense open-on-click activatable>
    <template #label="{ item }">
      <span :class="item.type === 'directory' ? 'folder-label' : 'ssh-label'" @mouseover="onMouseOver(item)">
        {{ item.title }}
      </span>
      <v-icon v-if="item.menuVisible" right @click.stop="openContextMenu(item, $event)">
        mdi-dots-vertical
      </v-icon>
    </template>

    <!-- 右键菜单 -->
    <v-menu ref="contextMenu" v-model="showContextMenu" :close-on-content-click="false" offset-y>
      <template v-slot:activator="{ isActive, props }">
        <div v-if="currentContextItem" v-on="props"></div>
      </template>
      <v-list>
        <v-list-item v-if="currentContextItemType === 'directory'" @click="handleAddSubDirectory">
          <v-list-item-title>添加子目录</v-list-item-title>
        </v-list-item>
        <v-list-item v-if="currentContextItemType === 'directory'" @click="handleAddSshConnection">
          <v-list-item-title>添加SSH连接</v-list-item-title>
        </v-list-item>
        <v-list-item v-if="currentContextItemType === 'directory'" @click="handleDeleteItem">
          <v-list-item-title>删除目录</v-list-item-title>
        </v-list-item>
        <v-divider v-if="currentContextItemType === 'sshConnection'"></v-divider>
        <v-list-item v-if="currentContextItemType === 'sshConnection'" @click="handleEditSshConnection">
          <v-list-item-title>编辑SSH连接</v-list-item-title>
        </v-list-item>
        <v-list-item v-if="currentContextItemType === 'sshConnection'" @click="handleDeleteItem">
          <v-list-item-title>删除SSH连接</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-treeview>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
//import { VTreeview, VListItem, VDivider, VIcon, VBtn, VMenu, VList } from 'vuetify/lib';

interface MenuItem {
  id: string;
  title: string;
  type: 'directory' | 'sshConnection';
  children?: MenuItem[];
  menuVisible: boolean;
}

const menuItems = ref<MenuItem[]>([
  {
    id: 'root',
    title: '根目录',
    type: 'directory',
    menuVisible: true,
    children: [
      {
        id: 'subDirectory1',
        title: '子目录1',
        type: 'directory',
        menuVisible: true,
        children: [
          {
            id: 'sshConnection1',
            title: 'SSH连接1',
            type: 'sshConnection',
            menuVisible: true,
          },
          ],
      },
      {
        id: 'subDirectory2',
        title: '子目录2',
        type: 'directory',
        menuVisible: true,
        children: [
          {
            id: 'sshConnection2',
            title: 'SSH连接2',
            type: 'sshConnection',
            menuVisible: true,
          },
          ],
      },
    ],
  },

]);

const showContextMenu = ref(false);
const currentContextItem = ref<MenuItem | null>(null);
let currentContextItemType: 'directory' | 'sshConnection' | null = null;

// 鼠标移入时显示菜单图标
function onMouseOver(item: MenuItem) {
  item.menuVisible = true;
  //clearTimeout(hoverTimeoutId);
  hoverTimeoutId = setTimeout(() => {
    if (currentContextItem.value !== item) {
      item.menuVisible = false;
    }
  }, 1000); // 自定义鼠标移出后的隐藏延迟时间
  clearTimeout(hoverTimeoutId);
}

let hoverTimeoutId: NodeJS.Timeout | null = null;

onMounted(() => {
  document.addEventListener('mouseout', clearHoverState);
});

onBeforeUnmount(() => {
  document.removeEventListener('mouseout', clearHoverState);
});

function clearHoverState(event: MouseEvent) {
  const treeViewNode = document.querySelector('.v-treeview-node__root');
  if (!treeViewNode?.contains(event.relatedTarget as Node)) {
    menuItems.value.forEach((item) => (item.menuVisible = false));
  }
}

function openContextMenu(item: MenuItem, event: MouseEvent) {
  event.stopPropagation();
  currentContextItem.value = item;
  currentContextItemType = item.type;
  showContextMenu.value = true;
}

function handleAddSubDirectory() {
  // ... 省略与之前相同的处理菜单点击事件的函数（handleAddSubDirectory、handleAddSshConnection等）
}
function handleAddSshConnection() {
  // ... 省略与之前相同的处理菜单点击事件的函数（handleAddSubDirectory、handleAddSshConnection等）
}
function handleDeleteItem() {
  // ... 省略与之前相同的处理菜单点击事件的函数（handleAddSubDirectory、handleAddSshConnection等）
}
function handleEditSshConnection() {
  // ... 省略与之前相同的处理菜单点击事件的函数（handleAddSubDirectory、handleAddSshConnection等）
}
// ... 省略与之前相同的处理菜单点击事件的函数（handleAddSubDirectory、handleAddSshConnection等）
</script>

<style scoped>
.folder-label:hover,
.ssh-label:hover {
  /* 根据需要设置鼠标悬停时的颜色 */
  color: var(--v-primary-base);
}
</style>

//...问答超时，请稍后再试